<template>
  <div class="tip">
    <div id="sidebar">
      <div id="wrap">
        <div id="prof"
             class="item ">
          <a href="# ">
            <span class="setting"></span>
          </a>
          <div class="ibar_login_box status_login "
               style="display: none;">
            <div class="avatar_box ">
              <p class="avatar_imgbox "><img :src="userInfo.avatar"></p>
              <ul class="user_info ">
                <li class="">{{userInfo.username}}</li>
                <li class="">{{userInfo.phone}}</li>
                <!--<li class="">级&nbsp;别普通会员</li>-->
              </ul>
            </div>
            <div class="login_btnbox ">
              <a href="# "
                 class="login_order ">我的订单</a>
              <a href="# "
                 class="login_favorite ">我的收藏</a>
            </div>
            <i class="icon_arrow_white "></i>
          </div>

        </div>
        <div id="shopCart "
             class="item ">
          <a href="# ">
            <span class="message "></span>
          </a>
          <p>
            购物车
          </p>
          <p class="cart_num ">0</p>
        </div>
        <div id="asset "
             class="item ">
          <a href="# ">
            <span class="view "></span>
          </a>
          <div class="mp_tooltip "
               style="left: -121px; visibility: hidden;">
            我的资产
            <i class="icon_arrow_right_black "></i>
          </div>
        </div>

        <div id="foot "
             class="item ">
          <a href="# ">
            <span class="zuji "></span>
          </a>
          <div class="mp_tooltip ">
            我的足迹
            <i class="icon_arrow_right_black "></i>
          </div>
        </div>

        <div id="brand "
             class="item ">
          <a href="#">
            <span class="wdsc "><img src="static/images/wdsc.png "></span>
          </a>
          <div class="mp_tooltip ">
            我的收藏
            <i class="icon_arrow_right_black "></i>
          </div>
        </div>

        <div class="quick_toggle ">
          <li class="qtitem ">
            <a href="# "><span class="kfzx "></span></a>
            <div class="mp_tooltip ">客服中心<i class="icon_arrow_right_black "></i></div>
          </li>
          <!--二维码 -->
          <li class="qtitem ">
            <a href="#none "><span class="mpbtn_qrcode "></span></a>
            <div class="mp_qrcode "
                 style="display:none; "><img src="static/images/weixin_code_145.png "><i class="icon_arrow_white "></i></div>
          </li>
          <li class="qtitem ">
            <a href="#top "
               class="return_top "><span class="top "></span></a>
          </li>
        </div>

        <!--回到顶部 -->
        <div id="quick_links_pop "
             class="quick_links_pop hide "></div>
      </div>

    </div>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
  name: 'yy-right-side-bar',
  data () {
    return {
      // userInfo: {
      //   avatarImg: 'static/images/no-img_mid_.jpg',
      //   username: '用户xMan'
      // }
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'isLogin',
      userInfo: 'getUserInfo'
    })
  }
}

</script>
